<template>
	<div class="bookslist">
		<div class="header">
			<el-input class="input" v-model="input" placeholder="请输入内容"></el-input>
			<el-button style="height: 40px;" type="danger" icon="el-icon-search" @click="setSearch()"></el-button>
			<router-link to="/pc/mycart" class="myCart">
				<i class="el-icon-shopping-cart-2"></i>
				我的购物车</router-link>
		</div>
		<div style="background-color: #f13f20; height: 2px;width: 100%; margin-bottom: 20px; width: 85%; margin: auto;">
		</div>
		<div class="text">
			<div class="classify">
				<ul>
					<li v-for="(item, i) in pressList" :key="i" @click="findBooks(item.id)" :tabindex="i">
						<p v-show="item.mark == true" style="font-weight: 800;">
							{{item.name}}
							<i class="el-icon-arrow-right"></i>
						</p>
						<p v-show="item.mark == false">
							{{item.name}}
							<i class="el-icon-arrow-right"></i>
						</p>

					</li>
				</ul>
			</div>
			<div class="booklist">
				<ul>
					<li v-for="(item, index) in booklist" :key="item.id">
						<div style="width: 15%; height: 100%;">
							<router-link :to="`/pc/bookdetail/${item.id}`">
								<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
							</router-link>
						</div>
						<div style="width: 70%; height: 100%;">
							<router-link :to="`/pc/bookdetail/${item.id}`">
								<h3 style="color: black" v-html="item.name"></h3>
							</router-link>
							<p v-html="item.author"></p>
							<p v-html="item.maker"></p>
							<div class="info"><p v-html="item.info"></p></div>
						</div>
						<div style="text-align: right;">
							<el-button class="detail" type="info" plain @click="detail(item.id)">详情</el-button>
							<p v-show="item.price != 0" class="Price">￥{{item.price}}</p>
							<el-button type="danger" class="buy" @click="addCart()">
								<i class="el-icon-shopping-cart-2"></i>购买
							</el-button>
						</div>
					</li>
					<el-pagination v-if="total > 0" class="pagination" background @current-change="handleCurrentChange"
						:current-page="1" :current-page.sync="curPage" :page-size="4" layout="prev, pager, next"
						:total="total">
					</el-pagination>
				</ul>
			</div>
		</div>

	</div>
</template>

<script>
	import Vue from 'vue';
	export default {
		data() {
			return {
				input: '',
				typeid: 0,
				pressList: [],
				booklist: [],
				total: 0,
				curPage: 0,
			}
		},
		async mounted() {
			await this.$axios.get("/api/public/type/findAll2").then(res => {
				this.pressList = res.data.data;
				this.pressList.sort(function(a, b) {
					return a.id - b.id
				})
				this.pressList.unshift({
					id: 0,
					name: '全部类型-默认'
				})
				this.pressList.forEach((item, i) => {
					this.pressList[i].mark = false;
				})
				if (this.$route.query.typeid != null) {
					this.pressList[this.$route.query.typeid].mark = true;
				}
			})
			if (this.$route.query.typeid != null) {
				await this.$axios.get("/api/public/findPageBook/1/4/" + this.$route.query.typeid).then(res => {
					//this.total = Math.ceil(res.data.data.total / res.data.data.books.length) || 0
					this.total = res.data.data.total
				})
				await this.$axios.get("/api/public/findPageBook/1/4/" + this.$route.query.typeid).then(res => {
					this.booklist = res.data.data.books
				})
			}
			if (this.$route.query.title != null) {
				this.typeid = -1
				let fd = new FormData();
				fd.append("key", this.$route.query.title)
				this.$axios.post("/api/public/book/findPageKey/1/6", fd).then(res => {
					this.booklist = res.data.data.books
				})
			}
		},
		methods: {
			findBooks(typeid) {
				this.curPage = 1;
				this.$axios.get("/api/public/findPageBook/1/4/" + typeid).then(res => {
					this.total = res.data.data.total
				})
				this.pressList.forEach((item, i) => {
					this.pressList[i].mark = false;
				})
				this.pressList[typeid].mark = true;
				this.$axios.get("/api/public/findPageBook/1/4/" + typeid).then(res => {
					this.booklist = res.data.data.books
				})
				this.typeid = typeid
			},
			handleCurrentChange(val) {
				this.$axios.get("/api/public/findPageBook/" + val + "/4/" + this.typeid).then(res => {
					this.booklist = res.data.data.books
				})
			},
			detail(typeid) {
				this.$router.push("/pc/bookdetail/" + typeid)
			},
			addCart() {
				if (this.$store.state.token != null) {
					this.$axios.get("/api/public/addCart/" + this.$route.params.bookid, this.$store.state.token).then(
						res => {
							this.total = res.data.data.total
						})
					Vue.prototype.$message({
						message: '已添加',
						type: 'success'
					});
				} else {
					Vue.prototype.$message.error('请登录后购买');
				}
			},
		},
		computed: {
			setSearch() {
				if (this.input != null) {
					this.typeid = -1
					let fd = new FormData();
					fd.append("key", this.input)
					this.$axios.post("/api/public/book/findPageKey/1/6", fd).then(res => {
						this.booklist = res.data.data.books
					})
				}
				this.input = '';
			}
		}
	}
</script>

<style scoped>
	.bookslist {}

	.bookslist .header {
		display: flex;
		justify-items: center;
		text-align: center;
		margin-left: 150px;
		margin-right: 150px;
		margin-top: 20px;
		margin-bottom: 20px;
		width: 100%;
		height: 50px;
	}

	.bookslist .header .input {
		margin-left: 25%;
		width: 30%;
	}

	.bookslist .header .myCart {
		display: flex;
		align-items: center;
		justify-items: center;
		margin-left: 15%;
		height: 40px;
		padding: 5px;
		background-color: #f76666;
		color: white;
		border-radius: 8px;
	}

	.bookslist .header .myCart:hover {
		padding: 8px;
		background-color: #f76666;
	}

	.bookslist .text {
		width: 85%;
		height: 750px;
		margin: auto;
		display: flex;
		margin-top: 10px;
	}

	.bookslist .text .classify {
		height: 100%;
		width: 20%;
		overflow: hidden;
		white-space: nowrap;
		overflow-y: auto;
	}

	.bookslist .text .classify::-webkit-scrollbar {
		display: none;
	}

	.bookslist .text .classify ul li {
		width: 80%;
		padding-left: 30px;
		line-height: 45px;
	}

	.bookslist .text .classify ul li:hover {
		border: 1px solid #f76666;
		color: #f76666;
		cursor: pointer;
	}

	/* .bookslist .text .classify ul li:focus {
		font-weight: 800;
	} */

	.bookslist .text .classify ul li i {
		height: 100%;
		line-height: 45px;
		float: right;
		color: #f76666;
	}

	.bookslist .text .booklist {
		width: 100%;
		height: 100%;
		display: flex;
		margin-left: 5%;
	}

	.bookslist .text .booklist ul {
		width: 100%;
		height: 100%;
	}

	.bookslist .text .booklist ul li {
		width: 100%;
		height: 23%;
		display: flex;
		overflow: hidden;
	}

	.bookslist .text .booklist ul li img {
		width: 90%;
		height: 90%;
	}

	.bookslist .text .booklist ul li img:hover {
		border: 1px solid #f76666;
		border-radius: 5px;
	}

	.bookslist .text .booklist ul li h3:hover {
		color: #f76666;
	}

	.bookslist .text .booklist ul li p {
		margin-top: 10px;
	}

	.bookslist .text .booklist .info {
		width: 100%;
		height: 65px;
		font-size: 13px;
		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.bookslist .text .booklist .pagination {
		text-align: center;
	}

	.bookslist .text .booklist .detail {
		border-radius: 0;
		border-bottom-left-radius: 10px;
	}

	.bookslist .text .booklist .Price {
		margin: 15px;
		color: #f13f20;
		font-weight: 700;
	}

	.bookslist .text .booklist .buy {
		border-radius: 0;
		border-bottom-left-radius: 10px;
		border-top-left-radius: 10px;
	}
</style>